<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="plugin/jq1.10.2.js"></script>
	<script src="plugin/chocolate.js"></script>
	<link rel="stylesheet" href="css/demo.css" />
	<title>巧克力</title>
</head>

<body>
<h2>第1组，间距5px，高度自动，列数划分原则[6,5,4,2,1]</h2>
<ul id="group1">
	<li class="chItem">1</li>
	<li class="chItem">2</li>
	<li class="chItem">3</li>
	<li class="chItem">4</li>
	<li class="chItem">5</li>
	<li class="chItem">6</li>
	<li class="chItem">7</li>
	<li class="chItem">8</li>
</ul>
<h2>第2组，间距10px，高度自动，列数划分原则[8,6,5]</h2>
<ul id="group2">
	<li class="chItem">1</li>
	<li class="chItem">2</li>
	<li class="chItem">3</li>
	<li class="chItem">4</li>
	<li class="chItem">5</li>
	<li class="chItem">6</li>
	<li class="chItem">7</li>
	<li class="chItem">8</li>
</ul>
<h2>第3组，间距2px，高度32，列数划分原则[6,5,4,3,3]</h2>
<ul id="group3">
	<li class="chItem">1</li>
	<li class="chItem">2</li>
	<li class="chItem">3</li>
	<li class="chItem">4</li>
	<li class="chItem">5</li>
	<li class="chItem">6</li>
	<li class="chItem">7</li>
	<li class="chItem">8</li>
</ul>
<script>
	function initCho(){
		$('#group1').chocolate({
			cols: [6,5,4,2,1]
		});
		$('#group2').chocolate({
			cols: [8,6,5],
			margin: 10
		});
		$('#group3').chocolate({
			cols: [6,5,4,3,3],
			margin: 2,
			height: 32
		});
	}
	$(function(){
		initCho()
	})
	$(window).resize(function(){
		initCho()
	
	})
	
	</script>
</body>

</html>
